<template>
  <div class="box">
    <Tabs></Tabs>
    <div class="video">
      <div class="videoplay-title">
        <div class="num">
          <div>
            <div class="lesson-num">{{ data.name }}</div>
            <div>{{ data.content }}</div>
          </div>

          <el-tooltip
            class="item"
            effect="dark"
            content="+61 434 033 647"
            placement="top"
          >
            <div class="link-serve">
              联系客服
              <i class="iconfont icon-message"></i>
            </div>
          </el-tooltip>
        </div>
        <div class="info">
          <div class="dead-time" v-if="data.playNum != null">
            截止观看时间:{{ data.endDate.substring(0, 10) }} 剩余次数：{{
              data.playNum
            }}次
          </div>
          <div class="dead-time" v-else>
            截止观看时间:2099-12-31 剩余次数：不限次数
          </div>
          <div class="watcher-num">
            <span class="no_watched">{{ data.num }}人已观看</span>
            <span class="avatar"><img v-lazy="data.teacherImg" alt="" /></span>
            <span class="uname">{{ data.teacherName }}</span>
          </div>
        </div>
      </div>
      <div class="mask">
        <video-player
          v-if="playerOptions.sources[0].src"
          oncontextmenu="return false"
          class="video-playerw-box"
          ref="videoPlayer"
          :options="playerOptions"
          :playsinline="true"
          customEventName="customstatechangedeventname"
          @play="onPlayerPlay($event)"
          @pause="onPlayerPause($event)"
          @ended="onPlayerEnded($event)"
          @ready="playerReadied"
        >
        </video-player>
      </div>
    </div>
    <div class="gap"></div>
    <Footer></Footer>
  </div>
</template>

<script>
import Tabs from '../tabs'
import Footer from '../footer'
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import { sendPost } from "../../utils/http";
import api from "../../config/api";
export default {
  components: {
    videoPlayer,
    Tabs,
    Footer
  },
  data () {
    return {
      showMask: true,
      id: '',
      playerOptions: {
        // videojs options
        muted: true,
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        poster: '' // 你的封面地址
      },
      data: {
      },
      num: 0
    }
  },
  created () {

    this.getData(this.$route.query.id)
  },
  mounted () {
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    // 获取课程视频连接
    getData (id) {
      var that = this
      sendPost(api.getCourseVideo, { id: id }).then((res) => {
        console.log(res.data)
        this.data = res.data
        this.playerOptions.sources[0].src = res.data.url
        this.playerOptions.poster = res.data.image
      })
    },
    // listen event
    onPlayerPlay (player) {
      console.log('play');
      if (this.num == 0) {
        this.num++
        sendPost(api.getCourseVideoUrl, { id: this.$route.query.id }).then((res) => {
          console.log(res.data)
          this.data = res.data
          this.playerOptions.sources[0].src = res.data.url
          this.playerOptions.poster = res.data.image
        })
      }
      // console.log('player play!', player)
    },
    onPlayerPause (player) {
      // console.log('player pause!', player)
    },
    playerStateChanged (playerCurrentState) {

    },
    // player is ready
    playerReadied (player) {
    },

    playVideo () {
      this.onPlayerPlay()
      this.showMask = false
    }

  },
}
</script>

<style lang="less" scoped>
.mask {
  width: 75rem;
  height: 42.1875rem;
  background-color: #000;
  position: relative;
  .play {
    width: 75rem;
    height: 42.1875rem;
    background-color: #000;
    font-size: 1.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    color: #fff;
    cursor: pointer;
  }
}
/deep/header {
  background-color: #fff !important;
  height: 4.5rem;
}
.box {
  background-color: #eff1f4;
}
.video {
  width: 75rem;
  position: relative;
  margin: 0 auto;
  padding-top: 5.625rem;
  padding-bottom: 3rem;
  #vjs_video_3 {
    width: 100%;
  }
  /deep/.video-js .vjs-big-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .videoplay-title {
    .num {
      display: flex;
      justify-content: space-between;
      font-size: 1.25rem;
      color: #999;
      margin-bottom: 0.625rem;
      .lesson-num {
        font-size: 1.5rem;
        color: #333;
      }
      .iconfont {
        font-size: 1.5rem;
        cursor: pointer;
      }
      .link-serve {
        margin: auto;
        margin-right: 0;
        cursor: pointer;
      }
    }
    .info {
      height: 3.75rem;
      font-size: 1.125rem;
      color: #999;
      background: #ededed;
      display: flex;
      padding: 0 1.25rem;
      .dead-time {
        height: 100%;
        width: 31.25rem;
        line-height: 3.75rem;
      }
      .watcher-num {
        display: flex;
        line-height: 3.75rem;
        .no_watched {
          margin-left: 24.375rem;
        }
        .uname {
          width: 5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          font-size: 1rem;
        }
        .avatar {
          width: 2.5rem;
          height: 2.5rem;
          margin-left: 1.25rem;
          margin-right: 0.625rem;
          img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
.gap {
  background-color: #eff1f4;
}
</style>
